<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编译作用域</title>
</head>
<body>

<!--父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。-->

<div id="app">

  <navigation-link url="/profile">
    Logged in as {{ user.name }}
  </navigation-link>
  <hr>
  <navigation-link url="/profile">
    Clicking here will send you to: {{ url }}
    <!--
    这里的 `url` 会是 undefined，因为其 (指该插槽的) 内容是
    _传递给_ <navigation-link> 的而不是
    在 <navigation-link> 组件*内部*定义的。
    -->
  </navigation-link>

</div>

<script src="../lib/vue.js"></script>
<script>
  Vue.component('navigation-link', {
    props: ['url'],
    template: `
      <a v-bind:href="url" class="nav-link">
        <slot></slot>
      </a>
    `
  })

  let vm = new Vue({
    el: '#app',
    data: {
      user: {
        name: '张三'
      }
    }
  })
</script>

</body>
</html>